<template>
	<view class="page">
		<view class="logo-container">
			<image class="logo" src="/static/logo.png"></image>
		</view>

		<view class="background">
			<view class="content">

				<view class="top">
					<text id="text1">Guest Registeration</text>
					<text id="text2">Tap the below button to start registration</text>
				</view>

				<view class="middle">
					<navigator url="/pages/info/info">
						<view class="button">
							<image src="/static/arrow_R.png"></image>
						</view>
					</navigator>
					<text id="start">Start</text>
				</view>

				<view class="bottom">
					<text>Location C </text>
					<text>EDIT</text>
				</view>

			</view>

		</view>
	</view>
</template>

<script>

</script>

<style lang="scss">
	.page {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 40px;
	}

	.logo {
		width: 129px;
		height: 42px;
		margin: 60rpx 0rpx;

	}

	.logo-container {
		height: 15vh;
	}

	.background {
		width: 100%;
		height: 75vh;
		background-image: url("/static/BG.png");
		margin: 20px;
	}

	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: space-between;
		height: 100%;

		.top,
		.middle {
			display: flex;
			flex-direction: column;
			align-items: center;
		}
	}

	.top {
		margin-top: 130px;
		margin-bottom: -100px;
	}

	#text1 {
		font-size: 40px;
		margin-bottom: 10px;
	}

	#text2 {
		font-size: 18px;
	}

	.middle {
		.button {
			height: 120px;
			width: 120px;
			border-radius: 50%;
			background-color: orangered;
			display: flex;
			align-items: center;
			justify-content: center;
			box-shadow: 0 0 12px 5px #eed0c6; 

			image {
				width: 54px;
				height: 24px;

			}
		}
	}

	.bottom {
		margin-bottom: 8px;
	}
</style>